import { defineStore } from "pinia";
import { ENUMS } from "@/utils/enums.js";
import { reactive, ref } from "vue";

export const useConfigure = defineStore("useConfigure", () => {
  const defaultActive = ref('/home') // 默认选中的菜单
  const configure = reactive({
    themeColor: "#1890ff", // 主题色
    // ---------- 菜单 ----------
    collapse: false, // 是否收起侧边栏
    autoCollapse: true, // 是否自动收起侧边栏
    menuMode: ENUMS.layoutModeEnum.key[1], // 菜单的布局模式
    menuBGColor: "#282c34", // 菜单的背景色
    textColor: "#ffffff", // 菜单的文字颜色
    activeTextColor: "#ffffff", // 菜单的激活文字颜色
    showMenuLogo: true, // 菜单的 logo
    // ---------- 分栏 ----------
    columnBgColor: "#282c34", // 分栏的背景色
    // ---------- 导航栏 ----------
    navbarMode: ENUMS.navbarModeEnum.key[0], // 导航栏的模式
    navbarIcon: true, // 导航栏是否显示图标
    // ---------- 过渡 ----------
    componentTransition: true, // 是否开启组件的过渡
    componentTransitionMode: ENUMS.componentTransitionEnum.key[0], // 组件的过渡模式
    // ---------- 工具 ----------
    refresh: true,
  })
  // 初始化配置
  const initConfigure = (config) => {
    const keys = Object.keys(config);
    keys.forEach((key) => {
      configure[key] = config[key];
    });
  }
  // 设置默认激活的路由
  const setDefaultActive = (value) => {
    defaultActive.value = value;
  }
  // 修改参数
  const change = (key, value) => {
    configure[key] = value;
  }
  return {
    defaultActive,
    configure,
    initConfigure,
    setDefaultActive,
    change
  }
});
